import { ActionType, PageHeaderWrapper, ProColumns, ProTable } from "@ant-design/pro-components";
import './materialCostComparison.less';
import React, { useRef, useState } from "react";
import { Ellipsis } from "@/components/Ellipsis";
import { filterTranNew, sortTran } from "@/utils/requestUtil";
import { getWorkingHoursComparisonsByProductCode, getProductInfoByPageAndInfoId } from "@/services/product/workHoursComparison";

const WorkHoursComparison: React.FC<{}> = (props) => {
    const actionRefLeft = useRef<ActionType>(null);
    const actionRefRight = useRef<ActionType>(null);
    const projectInfoId = props.projectInfoId;
    const [page, setPage] = useState<number>(1);
    const [productCode, setProductCode] = useState<number>();
    const columnsLeft: ProColumns[] = [
        {
            title: '序号',
            dataIndex: 'index',
            valueType: 'index',
            width: 50,
            render: (text, record, index) => (page - 1) * 100 + index + 1,
        },
        {
            title: '柜体编号',
            dataIndex: 'productCode',
            align: 'center',
            sorter: true,
        },
        {
            title: '柜体类型',
            dataIndex: 'productType',
            align: 'center',
            sorter: true,
            filters: true,
            onFilter: true,
            valueType: 'select',
            //有空需要改成动态数据
            valueEnum: {
                安装板: {
                    text: '安装板',
                },
                箱体: {
                    text: '箱体',
                },
                柜体: {
                    text: '柜体',
                },
                其他: {
                    text: '其他',
                },
            },
        },
    ];
    const columnsRight: ProColumns[] = [
        {
            title: '序号',
            dataIndex: 'index',
            valueType: 'index',
            width: 60,
            render: (text, record, index) => (page - 1) * 100 + index + 1,
        },
        {
            title: '工时类型',
            dataIndex: 'processName',
            align: 'center',
            sorter: true,
            render: (text) => <>{Ellipsis(text)}</>,
        },
        {
            title: '计划工时(H)',
            dataIndex: 'workHour',
            align: 'center',
            sorter: true,
            render: (text,record) => record.workHour? <>{record.workHour.toFixed(2)}</> : <>0.00</>
        },
        {
            title: '实际工时(H)',
            dataIndex: 'realWorkHour',
            align: 'center',
            sorter: true,
            render: (text,record) => record.realWorkHour? <>{record.realWorkHour.toFixed(2)}</> : <>0.00</>
        },
    ];

    const handlePageChange = (e: any) => {
        setPage(e);
      };

    return (
        <PageHeaderWrapper title={false} breadcrumb={undefined}>
            <div className="content">
                <div className="left">
                    <ProTable
                        actionRef={actionRefLeft} //用于触发刷新操作等，看api
                        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
                        search={false}
                        options={false}
                        onRow={(record) => ({
                            onClick: (a) => {
                              setProductCode(record.productCode);
                              a.stopPropagation();
                              let s = a.target.parentNode.parentNode.children;
                              // 先重置为默认样式
                              for (var i = 0; i < s.length; i++) {
                                s[i].style.color = '#000000d9';
                                s[i].style.fontWeight = 'normal';
                                s[i].style.backgroundColor = '#fff';
                              }
                              // 再设置高亮样式
                              a.target.parentNode.style.color = '#13C2C2';
                              a.target.parentNode.style.fontWeight = 'bold';
                              a.target.parentNode.style.backgroundColor = '#e6fffb';
                              actionRefRight.current!.reload();
                            },
                          })}
                        toolBarRender={(action, { selectedRows }) => [
                        ]}
                        request={async (params = {}, sort) => {
                            console.log(projectInfoId,'name');
                            const sorters = sortTran(sort);
                            const filters = filterTranNew(params);
                            const result = await getProductInfoByPageAndInfoId({
                                infoId: projectInfoId,
                                pageEntity: {
                                    current: 1,
                                    pageSize: 100,
                                    filters: filters,
                                    sorters: sorters,
                                }
                            });
                            return {
                                data: result.data.content,
                                total: result.data.totalElements,
                                success: result.success,
                            };
                        }}
                        pagination={{
                            defaultPageSize: 100,
                            pageSizeOptions: [],
                            onChange: handlePageChange,
                          }}
                        scroll={{ y: 300 }}
                        columns={columnsLeft}
                    />
                </div>
                <div className="right">
                    <ProTable
                        actionRef={actionRefRight} //用于触发刷新操作等，看api
                        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
                        search={false}
                        options={false}
                        toolBarRender={(action, { selectedRows }) => [
                        ]}
                        request={async (params = {}, sort) => {
                            if(!productCode){
                                return {
                                    data: 0,
                                    total: 0,
                                    success: 0,
                                }
                            }
                            console.log(productCode,'productCode');
                            const result = await getWorkingHoursComparisonsByProductCode(productCode);
                            console.log(result,'result');
                            return {
                                data: result.data,
                                total: result.data.length,
                                success: result.message,
                            };
                        }}
                        pagination={{
                            pageSize: 100,
                            pageSizeOptions: [100, 500, 1000],
                        }}
                        scroll={{ y: 300 }}
                        columns={columnsRight}
                    />
                </div>
            </div>
        </PageHeaderWrapper>
    );
};
export default WorkHoursComparison;